react-picker-address@1.0.3

react mobile address picker component

/* eslint-disable no-console */
import React from 'react';
import ReactDOM from 'react-dom';
import Picker from '../src';
import '../assets/index.less';
import { district } from './district';

class PickerDemo extends React.Component {
  state = {
    visible: false,
    address: '',
  }

  onChange = (value, selectedRows) => {
    this.setState({
      address: selectedRows.map(item => item.title).join(','),
      visible: false,
    });
    console.log('选择值:', value);
  }

  showPicker = () => {
    this.setState({
      visible: true,
    });
  }

  hidePicker = () => {
    this.setState({
      visible: false,
    });
  }

  render() {
    return (
      <div>
        <input onClick={this.showPicker} value={this.state.address} placeholder="请选择地区" readOnly />
        <Picker

          visible={this.state.visible}
          onClose={this.hidePicker}
          dataSource={district}
          onChange={this.onChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<PickerDemo />, document.getElementById('__react-content'));
Fork me on GitHub